<template>
  <div class="school-char fl"  id="schoolAnalysis"  style="width:50%;height: 10px">
    <v-chart :options="analysisOption"></v-chart>
  </div>
</template>

<script>

import ECharts from 'vue-echarts'
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/tooltip'

export default {
  name: "TopChart",
  components: {
    'v-chart': ECharts,
  },
  created() {

  },

  props:{
    xMax:{
      type: Number,
      required: true
    },
    minorData: {
      type: Number,
      required: true
    }
  },
  data() {
    return {

    }
  },
  computed: {
    analysisOption() {
      return {
         tooltip: {
           show: false
         },
         legend: {
           show: false
         },
         grid: {
           top: '0',
           left: '0',
           right: '4%',
           bottom: '0',
         },
         xAxis: {
           show: false,
           max: this.xMax,
           type: 'value'
         },
         yAxis: {
           type: 'category',
           show: false,
         },
         series: [
           {
             type: 'bar',
             barWidth: 10,
             data: [{
               value: this.minorData,
               itemStyle: {
                 normal: {
                   color: '#1890ff',
                   barBorderRadius: 6
                 }
               }
             }]
           },
         ]
       };
    }

  },
  methods: {

  },
  watch: {

  },


}
</script>
